<template>
	<view class="userInfo">
		<view class="user-info-section">
			<view class="user-avatar-section">
				<image class="user_avatar" :src="userInfoData.avatar"></image>
			</view>
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">获取头像</button>
			<view class="user-details">
				<view class="user-detail" @tap="editField('nickname')">
					<view class="detail-title">昵称:</view>
					<view class="detail-value">{{ userInfoData.nickname }}</view>
				</view>
				<view class="user-detail" @tap="editField('phone')">
					<view class="detail-title">手机号:</view>
					<view class="detail-value">{{ userInfoData.phone }}</view>
				</view>
				<view class="user-detail" @tap="editField('email')">
					<view class="detail-title">邮箱:</view>
					<view class="detail-value">{{ userInfoData.email }}</view>
				</view>
				<view class="user-detail" @tap="editField('sex')">
					<view class="detail-title">性别:</view>
					<view class="detail-value">{{ userInfoData.sex }}</view>
				</view>
			</view>
			<button @tap="logout"> 退出登录</button>
		</view>
	</view>

	<!-- UniPopup for editing -->
	<uni-popup ref="popup" borderRadius="10px 10px 0 0" type="bottom" background-color="#fff">
		<input type="text" v-model="editingField">
		<button class="popup-button" @tap="saveEdit" type="primary">保存</button>
	</uni-popup>
</template>

<script setup lang="ts">
	import { type Ref, reactive, ref } from 'vue';
	import { type User } from '/@/types/member';
	import { updateUser } from '@/services/mine';
	import { useMemberStore } from '@/stores';
	import { onLoad } from '@dcloudio/uni-app';
	const memberStore = useMemberStore()
	let { userInfo }: { userInfo: User }= memberStore.profile;
	onLoad(
		() => {
			userInfoData.value = userInfo;
			console.log(memberStore.profile)
		})
	const userInfoData  = ref<User>({

	});
	const logout = () => {
		memberStore.clearProfile();
		uni.switchTab({
			url: '/pages/index/index'
			})
	}
	let filed1 = ref('');
	const onChooseAvatar = (event) => {
		userInfoData.value.avatar = event.detail.avatarUrl;
		userInfo.avatar = event.detail.avatarUrl
		updateUser({
			userId: userInfo.userId,
			avatar: event.detail.avatarUrl
		})
	}
	const editingField = ref<string>('');
	const popup = ref(null)
	const editField = (field : string) => {
		filed1.value = field
		editingField.value = userInfoData.value[field];
		popup.value.open('bottom');
	};

	const saveEdit = () => {
		console.log(editingField.value)
		console.log("@@@", filed1.value)
		userInfoData.value[filed1.value] = editingField.value;
		switch (filed1.value) {
			case 'nickname':
				userInfo.nickname = editingField.value;
				updateUser(
					{
						userId: userInfo.userId,
						nickname: editingField.value
					});
				break;
			case 'phone':
				userInfo.phone = editingField.value;
				updateUser(
					{
						userId: userInfo.userId,
						phone: editingField.value
					});
				break;
			case 'address':
				userInfo.address = editingField.value
				updateUser(
					{
						userId: userInfo.userId,
						address: editingField.value
					});
				break;
			case 'email':
				userInfo.email = editingField.value;
				updateUser(
					{
						userId: userInfo.userId,
						email: editingField.value
					});
				break;
			case 'sex':
				userInfo.sex = editingField.value;
				updateUser(
					{
						userId: userInfo.userId,
						sex: editingField.value
					});
				break;
		}

		popup.value.close(); // Close the popup after saving
	};
</script>

<style scoped>
	.page {
		height: 100%;
		overflow: hidden;
		background-color: #f7f7f8;
	}

	.userInfo {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.user-info-section {
		gap: 20rpx;
	}

	.user-avatar-section {
		display: flex;
		align-items: center;
	}

	.user_avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.user-details {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: calc(100% - 40px);
		margin: auto;
		background-color: #ffffff;
		padding: 20px;
	}

	.user-detail {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-left: 10px;
		cursor: pointer;
		/* 添加指针样式表示可点击 */
		padding: 10px 0;
		/* 调整每个详情项的垂直内边距 */
		border-bottom: 1px solid #eee;
		/* 添加底部边框分隔线 */
	}

	.detail-value {
		flex: 1;
	}

	.popup-button {
		height: 30px;
		width: 200px;
	}
</style>